<template>
  <div class="transfer">
    <div class="transfer_icon" @click="transferRecord"><i></i>一键移交</div>
    <div class="title">
      <h3>人员更替 文件移交</h3>
      <p>将项目资料与项目任务自动移交给接替工作人员，延续工作执行</p>
    </div>
    <!--    第一步-->
    <div class="box" v-if="step==1">
      <div class="row">
        <div class="left" @click="is_show_selectMember=true">
          <div class="img" v-if="handover_Info.headImage==''"></div>
          <div class="img default-img" v-else-if="handover_Info.headImage==null"></div>
          <div class="img" v-else
               :style="{backgroundImage: 'url(\''+ (encodeURI(handover_Info.headImage)) +'\')' }"></div>
          <p class="name">{{handover_Info.name||'无'}}</p>
          <p class="bm">{{handover_Info.departmentName||'无归属部门'}}</p>
        </div>
        <div class="center">

        </div>
        <div class="right" @click="is_show_selectMember_2=true">
          <div class="img" v-if="receiver_Info.headImage==''"></div>
          <div class="img default-img" v-else-if="receiver_Info.headImage==null"></div>
          <div class="img" v-else
               :style="{backgroundImage: 'url(\''+ (encodeURI(receiver_Info.headImage)) +'\')' }"></div>
          <p class="name">{{receiver_Info.name||'无'}}</p>
          <p class="bm">{{receiver_Info.departmentName||'无归属部门'}}</p>
        </div>
      </div>
      <div class="btn" @click="toStep_2">下一步</div>
    </div>
    <!--    第二步-->
    <div class="box box_2" v-if="step==2">
      <div class="title">选择项目 <span @click="all_project">全选</span></div>
      <div class="content">
        <vuescroll :ops="ops">
          <ul class="list">
            <li v-for="(item,index) in projectList" :key="index">
              <el-checkbox v-model="item.is_checked">{{item.shortName}}</el-checkbox>
            </li>
          </ul>
        </vuescroll>
      </div>
      <div class="btn-list">
        <div class="next-btn" @click="toStep_3">{{taskList.length>0?'下一步':'确认移交'}}</div>
        <div class="pre-btn" @click="step=1">上一步</div>
      </div>
    </div>
    <!--    第三步-->
    <div class="box box_2" v-if="step==3">
      <div class="title">选择无归属项目的任务 <span @click="all_task">全选</span></div>
      <div class="content">
        <vuescroll :ops="ops">
          <ul class="list">
            <li v-for="(item,index) in taskList" :key="index">
              <el-checkbox v-model="item.is_checked">{{item.taskName}}</el-checkbox>
            </li>
          </ul>
        </vuescroll>
      </div>
      <div class="btn-list">
        <div class="next-btn" @click="transfer_fn">确认移交</div>
        <div class="pre-btn" @click="back_step">上一步</div>
      </div>
    </div>
    <!--    第四步-->
    <div class="box_4" v-if="step==4">
      <div class="inner">
        <div class="title">移交进度</div>
        <div class="content">
          <ul class="list">
            <li class="item">
              <div class="row">
                <el-progress :percentage="percentage" :format="format" :color="'#0755DB'"></el-progress>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--    成功-->
    <div class="box_5" v-if="step==5">
      <div class="inner">
        <i></i>
        <p>您的项目已经移交完成！</p>
        <div class="btn" style="margin-right: 32px;" @click="transfer_complete">确定</div>
      </div>
    </div>
    <!--    失败-->
    <div class="box_5" v-if="step==6">
      <div class="inner">
        <i></i>
        <p>您的项目移交失败</p>
        <!--        <div class="btn btn-1">取消</div>-->
        <div class="btn" style="margin-right: 32px;" @click="transfer_complete">关闭</div>
      </div>
    </div>
    <!--    移交记录-->
    <div class="box_7" v-if="step==7">
      <div class="inner">
        <i @click="step=1"></i>
        <div class="title">移交记录</div>
        <div class="content" v-if="transferRecord_list.length>0">
          <vuescroll :ops="ops">
            <ul class="list" >
              <li v-for="(item,index) in transferRecord_list" :key="index">
                <p class="time">{{new Date(item.addTime).Format('yyyy-MM-dd')}}</p>
                <div class="row">
                  <div class="user">
                    <img src="../../../assets/img/ic_dh_tx.png" alt="">{{item.sourceUserName}}
                  </div>
                  <div class="icon">
                    <img src="../../../assets/img/transfer/ic_yj.png" alt="">
                  </div>
                  <div class="user">
                    <img src="../../../assets/img/ic_dh_tx.png" alt="">{{item.targetUserName}}
                  </div>
                </div>
              </li>
            </ul>
          </vuescroll>
        </div>
        <div  v-if="transferRecord_list.length==0" class="default-page default-page-transfer">
          <img src="../../../assets/img/defaultPage/pic_zwxm.png" alt="">
          <p>没有移交记录</p>
        </div>
      </div>
    </div>
    <!--    移交人选择-->
    <div class="main-popup" v-if="is_show_selectMember">
      <select-member @close="closeModal" :title="'选择移交人'" :select="handoverId" @callback="selectMemberCallback"
                     :indexClose="'is_show_selectMember'"/>
    </div>
    <!--    接收人选择-->
    <div class="main-popup" v-if="is_show_selectMember_2">
      <select-member @close="closeModal_2" :title="'选择接收人'" :select="receiverId" @callback="selectMemberCallback_2"
                     :indexClose="'is_show_selectMember_2'"/>
    </div>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import selectMember from '@/components/base/selectMember';

  export default {
    name: "Transfer",
    components: {
      vuescroll, selectMember
    },
    data() {
      return {
        transferRecord_list: [],
        is_all_checked_task: false,
        is_all_checked_project: false,
        taskList: [],
        projectList: [],
        receiverId: '',//接收人id
        receiver_Info: {
          headImage: '',
          departmentName: '请选择',
          name: '接收人',
        },//接收人信息
        handoverId: '',//移交人id
        handover_Info: {
          headImage: '',
          departmentName: '请选择',
          name: '移交人',
        },//移交人信息
        is_show_selectMember: false,
        is_show_selectMember_2: false,
        percentage: 0,
        step: '1',
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '60px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        transfer_project_ids: [],//需要移交的项目id，
        transfer_task_ids: [],//需要移交的零时任务id，
      }
    },
    created() {

    },
    methods: {
      back_step(){
        if(this.projectList.length==0){
          this.step=1;
        }else {
          this.step=2;
        }
      },
      //移交记录
      transferRecord() {
        this.step = 7;
        this.$http.get('project/transfer/page', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            pageNum: 1,
            pageSize: 999,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.transferRecord_list = res.data.list;
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      all_project() {
        this.is_all_checked_project = !this.is_all_checked_project;
        if (this.is_all_checked_project) {
          this.projectList.map(function (item, index) {
            item.is_checked = true;
          });
        } else {
          this.projectList.map(function (item, index) {
            item.is_checked = false;
          });
        }
      },
      all_task() {
        this.is_all_checked_task = !this.is_all_checked_task;
        if (this.is_all_checked_task) {
          this.taskList.map(function (item, index) {
            item.is_checked = true;
          });
        } else {
          this.taskList.map(function (item, index) {
            item.is_checked = false;
          });
        }
      },
      closeModal() {
        this.is_show_selectMember = false;
      },
      closeModal_2() {
        this.is_show_selectMember_2 = false;
      },
      //移交人回调信息
      selectMemberCallback(id, index, data) {
        this.handoverId = id;
        if( this.handoverId==this.receiverId){
          this.$message.error('移交人和接收人不能时同一人');
          return;
        }
        this.handover_Info = data;
        this.closeModal();
      },
      //接收人回调信息
      selectMemberCallback_2(id, index, data) {
        this.receiverId = id;
        if( this.handoverId==this.receiverId){
          this.$message.error('移交人和接收人不能时同一人');
          return;
        }
        this.receiver_Info = data;
        this.closeModal_2();
      },
      format(percentage) {
        return percentage === 100 ? '已完成' : `${percentage}%`;
      },
      toStep_2() {
        //请求需要移交的项目,先判断选择了移交人和接收人没有
        if (this.handoverId == '') {
          this.$message.error('请选择移交人');
          return;
        }
        if (this.receiverId == '') {
          this.$message.error('请选择接收人');
          return;
        }
        //请求项目
        this.$http.get('project/project/transferList', {
          params: {
            sourceUserId: this.handoverId,
            pageNum: 1,
            pageSize: 999
          }
        }).then(res => {
          if (res.statusCode == 200) {
            let list = res.data.list;
            list.map(function (item, index) {
              item.is_checked = false;
            });
            this.projectList = list || [];
            //请求零时任务
            this.$http.get('task/task/query/transferTempTask', {
              params: {
                userId: this.handoverId
              }
            }).then(res => {
              if (res.statusCode == 200) {
                let list = res.data;
                list.map(function (item, index) {
                  item.is_checked = false
                });
                this.taskList = list || [];
                if (this.projectList.length == 0) {
                  //没有项目，直接去任务
                  if (this.taskList.length == 0) {
                    this.$message.error('当前移交人没有可移交的项目或者任务');
                  } else {
                    this.step = 3;
                  }
                } else if (this.projectList.length > 0) {
                  this.step = 2;
                }
              } else {
                this.$message.error(res.statusMsg);
              }
            });
          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      toStep_3() {
        let _ids = [];
        this.projectList.map(function (item, index) {
          if (item.is_checked) {
            _ids.push(item.id)
          }
        });
        this.transfer_project_ids = _ids;
        if (this.taskList.length == 0) {
          console.log('没人零时任务，直接移交');
          //没人零时任务，直接移交
          this.transfer_fn();
        } else {
          this.step = 3;
        }

      },
      //确认移交
      transfer_fn() {
        console.log(1);
        let _ids = [];
        let _this = this;
        if (this.taskList.length > 0) {
          //有临时任务
          this.taskList.map(function (item, index) {
            if (item.is_checked) {
              _ids.push(item.taskId);
            }
          });
        }
        this.transfer_task_ids = _ids;
        if (this.transfer_task_ids.length == 0 && this.transfer_project_ids.length == 0) {
          this.$message.error('请选择需要移交的项目或临时任务');
          return;
        }
        this.step = 4;
        let _time = setInterval(() => {
          _this.percentage += 2;
          if (_this.percentage > 100) {
            _this.percentage = 100;
            clearTimeout(_time);
            this.$http.post('project/transfer/exec', {
              projectIds: this.transfer_project_ids,
              targetUserId: this.receiverId,
              sourceUserId: this.handoverId,
              temporaryTaskIds: this.transfer_task_ids,
            }).then(res => {
              if (res.statusCode == 200) {
                _this.step = 5;
              } else {
                _this.step = 6;
              }
            });
          }
        }, 100);
      },
      //完成一键移交
      transfer_complete() {
        this.step = 1;
        this.receiverId = '';
        this.receiver_Info = {
          headImage: '',
          departmentName: '请选择',
          name: '接收人',
        };
        this.handoverId = '';
        this.handover_Info = {
          headImage: '',
          departmentName: '请选择',
          name: '移交人',
        }
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .transfer {
    position: relative;

    .transfer_icon {
      position: absolute;
      right: 40px;
      top: 30px;
      font-size: 16px;
      color: #454A55;
      cursor: pointer;

      i {
        display: inline-block;
        background-image: url("../../../assets/img/transfer/ic_yjjl.png");
        width: 18px;
        height: 18px;
        vertical-align: middle;
        margin-right: 8px;
      }
    }

    > .title {
      text-align: center;
      padding-top: 100px;
      padding-bottom: 100px;

      > h3 {
        font-size: 26px;
        color: #454A55;
        padding-bottom: 40px;
        font-weight: normal;
      }

      > p {
        font-size: 16px;
        color: #454A55;
      }
    }

    .box {
      width: 810px;
      height: 480px;
      border: 1px dashed #B3C0C9;
      margin: 0 auto;
      border-radius: 6px;
      text-align: center;
      padding-top: 188px;

      > .row {
        > .left {
          display: inline-block;

          > .img {
            display: inline-block;
            width: 70px;
            height: 70px;
            cursor: pointer;
            background-image: url("../../../assets/img/transfer/ic_member_nor.png");
            background-size: cover;
            background-position: center;
            border-radius: 50%;
          }

          > .default-img {
            background-image: url("../../../assets/img/ic_my_head.png");
          }

          > .img:hover {
            background-image: url("../../../assets/img/transfer/ic_member_pre.png")!important;
          }

          > .name {
            color: #454A55;
            font-size: 17px;
            padding-top: 18px;
            height: 37px;
          }

          > .bm {
            padding-top: 14px;
            color: #96A2AA;
            font-size: 14px;
            height: 29px;
          }
        }

        > .center {
          display: inline-block;
          width: 100px;
          margin: 0 50px;
        }

        > .right {
          display: inline-block;

          > .img {
            display: inline-block;
            width: 70px;
            height: 70px;
            cursor: pointer;
            background-image: url("../../../assets/img/transfer/ic_member_nor.png");
            background-size: cover;
            background-position: center;
            border-radius: 50%;
          }

          > .img:hover {
            background-image: url("../../../assets/img/transfer/ic_member_pre.png");
          }

          > .default-img {
            background-image: url("../../../assets/img/ic_my_head.png");
          }

          > .name {
            color: #454A55;
            font-size: 17px;
            padding-top: 18px;
            height: 37px;
          }

          > .bm {
            padding-top: 14px;
            color: #96A2AA;
            font-size: 14px;
            height: 29px;
          }
        }
      }

      > .btn {
        width: 96px;
        line-height: 40px;
        height: 40px;
        text-align: center;
        background-color: #0755DB;
        color: #fff;
        font-size: 14px;
        border-radius: 6px;
        margin: 48px auto 0 auto;
        cursor: pointer;
      }
    }

    .box_2 {
      padding: 0 95px;

      .title {
        padding-top: 40px;
        padding-bottom: 30px;
        color: #454A55;
        font-size: 17px;
        text-align: center;

        > span {
          float: right;
          font-size: 14px;
          color: #96A2AA;
          cursor: pointer;
        }
      }

      .content {
        background-color: #F2F6F9;
        height: 280px;
        padding: 24px;

        .list {
          text-align: left;

          > li {
            margin-bottom: 26px;
          }

          > li:last-child {
            margin-bottom: 0;
          }
        }
      }

      .btn-list {
        margin-top: 40px;
        cursor: pointer;

        > div {
          display: inline-block;
          width: 96px;
          line-height: 40px;
          height: 40px;
          font-size: 14px;
          color: #96A2AA;
        }

        .next-btn {
          background-color: #0755DB;
          border-radius: 6px;
          color: #fff;
        }
      }
    }

    .box_4 {
      left: 0;
      top: 0;
      z-index: 100;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);

      > .inner {
        width: 500px;
        height: 200px;
        border-radius: 10px;
        background-color: #ffffff;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding: 32px;

        > .title {
          color: #454A55;
          font-weight: bold;
          font-size: 18px;
          position: relative;
          padding-bottom: 20px;

          i {
            position: absolute;
            background-image: url("../../../assets/img/close_icon.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 16px;
            height: 17px;
            right: 0;
            top: 0;
            cursor: pointer;
          }
        }

        > .content {
          margin-top: 30px;

          .list {
            > .item {
              margin-bottom: 20px;

              > h3 {
                color: #454A55;
                font-size: 16px;
              }

              .row {
                overflow: hidden;
                margin-top: 20px;

                .left {
                  float: left;
                  width: 500px;
                }

                .right {
                  float: left;
                  color: #96A2AA;
                  font-size: 14px;
                }
              }
            }

            > .item:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }

    .box_5 {
      left: 0;
      top: 0;
      z-index: 100;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);

      .inner {
        width: 575px;
        height: 173px;
        border-radius: 10px;
        background-color: #ffffff;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;

        i {
          position: absolute;
          background-image: url("../../../assets/img/close_icon.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          width: 16px;
          height: 17px;
          right: 32px;
          top: 30px;
          cursor: pointer;
        }

        p {
          padding-left: 32px;
          color: #454A55;
          font-size: 14px;
          padding-top: 80px;
        }

        .btn {
          float: right;
          width: 88px;
          height: 32px;
          line-height: 32px;
          color: #FFFFFF;
          border-radius: 6px;
          font-size: 14px;
          background-color: #0755DB;
          text-align: center;
          margin-top: 24px;
          cursor: pointer;
        }

        .btn-1 {
          color: #96A2AA;
          background-color: #fff;
        }
      }
    }

    .box_7 {
      left: 0;
      top: 0;
      z-index: 100;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);

      .inner {
        width: 740px;
        height: 530px;
        border-radius: 10px;
        background-color: #ffffff;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding: 32px;

        i {
          position: absolute;
          background-image: url("../../../assets/img/close_icon.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          width: 16px;
          height: 17px;
          right: 32px;
          top: 30px;
          cursor: pointer;
        }

        .title {
          font-size: 18px;
          color: #454A55;
          font-weight: bold;
          padding-bottom: 16px;
        }

        .content {
          height: 380px;

          .list {
            li {
              padding-top: 24px;
              border-bottom: 1px solid #EEEEEE;
              padding-bottom: 24px;

              .time {
                color: #96A2AA;
                font-size: 14px;
                padding-bottom: 40px;
              }

              .row {
                overflow: hidden;

                > div {
                  float: left;

                  img {
                    display: inline-block;
                    width: 32px;
                    height: 32px;
                    vertical-align: middle;
                    margin-right: 8px;
                  }

                  color: #454A55;
                  font-size: 16px;
                }

                .icon {
                  margin: 0 15px;

                  img {
                    width: 17px;
                    height: 12px;
                    vertical-align: bottom;
                  }
                }
              }
            }
          }
        }
      }
    }
    .default-page-transfer{
      margin-top: 80px;
      img{
        width: 200px;
      }
      p{
        padding-top: 15px;
      }
    }
  }
</style>
